*{
    padding: 0;
    margin: 0;
    list-style: none;
}

// html::-webkit-scrollbar-thumb{
//     background-color: rgb(224, 224, 224)
//   }
// html::-webkit-scrollbar {
//     width: 10px; /* 设置滚动条的宽度 */
// }
    

// 头部
#header{
    padding: 15px;
    background-color: #eeeeee;
    transition: .2s;
    position: sticky;
    z-index: 999;
    .header-content{
        display: flex;
        flex-wrap: wrap;
        li{
            margin: 3px;
            font-size: 14px;
            vertical-align: middle;
            span{
                vertical-align: middle;
            }
        }
    }
    select,input{
        padding: 2px 4px;
        outline: none;
    }
    button{
        box-sizing: border-box;
        padding: 2px 15px;
        border: none;
        background-color: #fff;
        border: 1px solid #ccc;
        cursor: pointer;
        &:hover{
            opacity: .7;
            border-color: #e6e6e6;
        }
    }
}

#content{
    padding: 15px;
    box-sizing: border-box;
    overflow: auto;
    #tableCenter{
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
        thead tr{
            color: rgb(149, 170, 109);
            font-weight: bold;
            position: sticky;
            top: -15px;
            th{
                white-space: nowrap;
                padding: 5px 10px;
                font-size: 16px;
            }
        }
        tbody tr.active{
            background-color: yellow !important;
        }
        tbody td{
            padding: 12px 10px;
            color: rgb(0, 109, 54);
            .actions{
                display: flex;
                align-items: center;
                flex-direction: column;
                button{
                    width: 80%;
                }
            }
        }
        td,th{
            text-align: center;
        }
        tr:nth-child(even){
            background: rgb(230, 238, 214)
        }
        tr:nth-child(odd){
            background: white
        }

    }
    .site_img{
        transition: .2s;
        &:hover{
            transform: scale(4);
        }
    }
}




// 模态框
.modalbox{
    max-width: 600px;
    // width: 80%;
    // padding: 15px; 
    width: 0px;
    box-sizing: content-box;
    overflow: hidden;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,.3);
    z-index: 888;
    background-color: #fff;
    #modalbox-title{
        text-align: center;
        font-weight: bold;
    }
    #modalbox-content{
        min-height: 100px;
        max-height: 500px;
        overflow-y: auto;
        margin: 10px 0px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        box-sizing: border-box;
        & > ul {
            & > li{
                margin-bottom: 10px;
            }
        }
 
        select,input[type=text]{
            width: 80%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            &:focus{
                outline: none;
                border: 1px solid #8a8a8a;
            }  
        }
    }
    #modalbox-control{
        display: flex;
        justify-content: center;
        .control{
            width: 80%;
            text-align: right;
        }
        button{
            padding: 5px 20px;
            outline: none;
            cursor: pointer;
            margin: 0px 3px;
            border: none;
            border-radius: 15px;
            color: #fff;
            font-size: 15px;
            box-sizing: border-box;
            &:nth-child(1){
                background-color: rgb(3, 151, 3);
            }
            &:nth-child(2){
                background-color: rgb(167, 0, 0);
            }
            &:hover{
                opacity: .7;
            }
        }
    }
    .actions{
        label{
            margin-right: 5px;
            & > input{
                vertical-align: middle;
                margin-right: 3px;
            }
        }
    }
}


.modalbox.show{
    animation: showBoxan .5s forwards;
}
.modalbox.hide{
    animation: hideBoxan .5s forwards;
}

// 提示消息
#globalMsg{
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    animation: move .5s forwards;
    .tips{
        background-color: #fff;
        border-radius: 10px;
        padding: 5px 15px;
        letter-spacing: 3px;
        font-weight: bold;
        box-shadow: 0 0 10px 0 rgba(0,0,0,.3);
    }
}


#globalConfirm{
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    animation: move .5s forwards;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.3);
    padding: 10px;
    z-index: 9999;
    background-color: #fff;
    .container{
        min-width: 300px;
        .title{
            padding-bottom: 15px;
            margin-bottom: 15px;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }
        .control{
            display: flex;
            justify-content: space-around;
            button{
                border: none;
                padding: 8px 20px;
                cursor: pointer;
                &:hover{
                    opacity: .7;
                }
            }
            button:nth-child(2){
                background-color: rgb(116, 15, 15);
                color: #fff;
            }
        }
    }
}

@keyframes move{
    to{
        top: 30%;
    }
}

// 动画
@keyframes showBoxan{
    to{
        width: 80%;
        padding: 15px;
    }
}

@keyframes hideBoxan{
    to{
        transform: scale(0);
        opacity: 0;
        width: 0;
        padding: 0;
    }
}